<template>
    <div>
        <!-- 编辑区域 -->
        <div class="form flex unified-flex-align unified-flex-center" v-loading="pageLoading">
            <!-- 状态 -->
            <div style="width: 100%;">
                <el-form ref="form" :model="form" label-width="80px">

                    <el-form-item v-if="bolongShow" label="归属地区">
                        <el-select v-model="form.bolong" placeholder="请选择归属地区">
                            <el-option v-for="item in form.list" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="地区名称">
                        <el-input v-model.trim="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地区编码">
                        <el-input type="number" v-model.number="form.code"></el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model.number="form.status" placeholder="请选择活动区域">
                            <el-option label="正常" :value="0"></el-option>
                            <el-option label="关闭" :value="1"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="clickSumbitFomr">提交修改</el-button>
                        <el-button @click="back">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>



        </div>



    </div>
</template>

<script>
    export default {

        created() {
            //query对象数据检查,（检查需要的对象属性是否缺失）
            let {
                mode,
                type
            } = this.$route.query
            this.mode = mode
            let getBolongType = ""

            if (type == "province") {

                this.pageTitle = "省份"
                getBolongType = ""

            } else if (type == "city") {

                this.pageTitle = "城市"
                getBolongType = "province"
                this.bolongShow = true

            } else if (type == "urban") {

                this.pageTitle = "市区"
                getBolongType = "city"
                this.bolongShow = true

            } else if (type == "street") {

                this.pageTitle = "街道"
                getBolongType = "urban"
                this.bolongShow = true
            }

            if (mode == 0) { // 编辑地区
                //需要检查的字段
                let field = [
                    'bolong', '_id', 'code', 'name', 'status', 'type'
                ].every(item => {
                    if (this.$route.query[item] != undefined) {
                        return true
                    } else {
                        return false
                    }
                })
                if (!field) {
                    this.$router.replace({
                        path: "/403",
                        query: {
                            error: "访问被拒绝，参数错误"
                        }
                    })
                } else {
                    let {
                        _id,
                        name,
                        code,
                        bolong,
                        status
                    } = this.$route.query
                    this.getBolongList(getBolongType).then(() => {
                        this.$set(this.form, "bolong", bolong)
                        this.$set(this.form, "type", type)
                        this.$set(this.form, "code", Number(code))
                        this.$set(this.form, "status", Number(status))
                        this.$set(this.form, "name", name)
                        this.$set(this.form, "_id", _id)
                        this.pageLoading = false
                    })
                }
            } else if (mode == 1) { // 添加地区
                this.$set(this.form, "type", type)
                this.getBolongList(getBolongType).then(() => {
                    this.pageLoading = false
                })

            } else {
                this.$router.replace({
                    path: "/403",
                    query: {
                        error: "访问被拒绝，参数错误"
                    }
                })
            }
        },

        data() {
            return {
                // 页头标题
                pageTitle: "",
                // api地址
                api: this.$api.region,
                // 页面加载状态
                pageLoading: true,
                // 归属地区选择框是否显示
                bolongShow: false,
                // 页面模式  0编辑模式  1添加模式
                mode: 0,
                // 面包屑
                routes: [{
                        path: 'index',
                        breadcrumbName: '运费管理',
                    },
                    {
                        path: 'first',
                        breadcrumbName: '地区管理',
                    }
                ],
                // 修改的数据
                form: {
                    _id: "",
                    type: "province", // 记录类型
                    bolong: "", // 归属地区id
                    list: [], // 归属地区列表
                    name: "", // 地区名称
                    code: null, // 地区编码
                    status: 0 // 地区状态
                }
            }
        },
        methods: {
            // 页头点击返回
            back() {
                this.$router.back()
            },
            // 点击提交表单
            clickSumbitFomr() {

                console.log(this.mode);

                if (this.mode == 0) {
                    this.editRegion()
                } else {
                    this.addRegion()
                }
            },
            editRegion() {
                let {
                    type,
                    _id,
                    code,
                    name,
                    bolong,
                    status
                } = this.form
                if (!_id) {
                    this.$message.error("地区ID不能为空")
                } else if (!name) {
                    this.$message.error("地区名称不能为空")
                } else if (!code) {
                    this.$message.error('地区编码不能为空')
                } else if (!status && status != 0) {
                    this.$message.error('地区状态错误')
                } else {
                    this.$confirm('确定要修改该地区吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.pageLoading = true
                        return this.$axios({
                            url: this.api,
                            method: "POST",
                            data: {
                                "action": "update",
                                "params": {
                                    _id,
                                    type,
                                    code,
                                    name,
                                    bolong,
                                    status
                                }
                            }
                        })
                    }).then(res => {
                        if (res.data.code == 0) {
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }).finally(() => {
                        this.pageLoading = false
                    })
                }

            },
            addRegion() {

                this.$axios({
                    url: this.api,
                    method: "POST",
                    data: {
                        "action": "add",
                        "params": {
                            type: this.form.type,
                            code: this.form.code,
                            name: this.form.name,
                            bolong: this.form.bolong,
                            status: this.form.status
                        }
                    }
                }).then(res => {

                    console.log(res.data);

                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg)
                    } else {
                        this.$message.error(res.data.msg)
                    }


                })
            },
            getBolongList(type) {

                return new Promise((resole, reject) => {
                    this.$axios({
                        url: this.api,
                        method: "GET",
                        params: {
                            "action": "getlist",
                            "params": {
                                type: type
                            }
                        }
                    }).then(res => {
                        if (res.data.code == 0) {
                            this.$set(this.form, "list", res.data.data)
                            resole(res.data)
                        } else {
                            reject(res.data)
                        }
                    })

                })

            }
        },
    }
</script>

<style >
    .form {
        padding: 30px 10%;
        box-sizing: border-box;
        background-color: #fff;
    }
</style>
